<template>
  <div class="suggest">
    <div class="suggestT">
      <p @click="$router.go(-1)">
        <img src="../assets/leftl.png" />
      </p>
      <p>投诉建议</p>
      <p></p>
    </div>
    <div class="wn">
      <div class="contactStyle ajc col">
        <div>为提高沟通效率，建议您添加客服微信或拨打客服电话</div>
        <div class="ac">
          <p>
            <img src="../assets/wxg.png" />
            <span>微信:15985468523</span>
          </p>
          <p>
            <img src="../assets/phoner.png" />
            <span>电话:0238 1333225</span>
          </p>
        </div>
      </div>
      <div class="yourContact">
        <p>
          <span>您的姓名：</span>
          <input v-model="suggestData.name" type="text" />
        </p>
        <p>
          <span>您的电话：</span>
          <input v-model="suggestData.phone" type="text" />
        </p>
      </div>
      <div class="leaveSuggest">
        <p>
          <!--<img src="../assets/shur.png" />-->
          <textarea v-model="suggestData.msg" type="text" placeholder="请留下您的意见或者建议" />
        </p>
        <!--<p>-->
          <!--<img src="../assets/img.png" />-->
        <!--</p>-->
      </div>
      <div class="sumbitSuggest">
        <p @click="submitSuggest">提交</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      suggestData: {
        name: null,
        phone: null,
        msg: null
      }
    };
  },
  created() {
    this.$parent.showTabbar = false;
  },
  methods: {
    submitSuggest() {
      this.$axios({
        url: '/complaint/suggestion?name=' + this.suggestData.name + '&phone' + this.suggestData.phone + '&images=null&msg=' + this.suggestData.msg,
        method: 'post'
      }).then(res => {
        if (res.data.code === 200) {
          this.$toast('提交成功！感谢您的反馈')
          this.suggestData.name = null
          this.suggestData.phone = null
          this.suggestData.msg = null
        } else {
          this.$toast('提交失败，请稍后重试')
        }
      })
    },
  }
};
</script>

<style lang='less'>
.suggestT {
  padding: 10px 0;
  display: flex;
  background: linear-gradient(0deg, #e91a0e 0%, #f54822 100%),
    linear-gradient(0deg, #e40805 0%, #e40a07 100%);
  p {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  p:nth-child(1),
  p:nth-child(3) {
    width: 10%;
    img {
      width: 29%;
    }
  }
  p:nth-child(2) {
    width: 80%;
    color: #ffffff;
    font-size: 16px;
  }
}
.contactStyle {
  margin-top: 10px;
  background: #fff;
  padding: 7px 0;
  box-shadow: 2px 2px 1px #eee;
  div:nth-child(1) {
    font-size: 13px;
    padding-bottom: 15px;
  }
  div:nth-child(2) {
    p {
      display: flex;
      align-items: center;
    }
    p:nth-child(1) {
      img {
        width: 10%;
        height: 1rem;
        padding-right: 5px;
      }
    }
    p:nth-child(2) {
      img {
        width: 8%;
        height: 1rem;
        padding-right: 5px;
      }
    }
  }
}
.yourContact {
  padding: 8px 9px;
  margin-top: 10px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 2px 2px 1px #eee;
  p {
    padding: 8px 0;
    span {
      font-size: 16px;
    }
    input {
      border: 0;
      outline: 0;
    }
  }
  p:nth-child(1) {
    border-bottom: 1px solid #eee;
  }
}
.leaveSuggest {
  border-radius: 5px;
  box-shadow: 2px 2px 1px #eee;
  background: #fff;
  margin-top: 10px;
  padding: 10px;
  p:first-child {
    display: flex;

    img {
      height: 1.1rem;
      padding-top: 2px;
    }
    textarea {
      border: 0;
      outline: 0;
      height: 5.5rem;
      width: 98%;
      display: flex;
      flex-wrap: wrap;
    }
  }
  p:last-child {
    img {
      height: 5.6rem;
      width: 30.5%;
    }
  }
}
.sumbitSuggest {
  margin-top: 35px;
  p {
    width: 85.6%;
    text-align: center;
    padding: 13px 0;
    background: linear-gradient(170deg, #ea1e10 0%, #f54722 100%);
    font-size: 19px;
    margin: 0 auto;
    border-radius: 29px;
    color: #fff;
  }
}
</style>